* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hamburger_menu {
    width: 100vm;
    height: 48px;
    background-color: #000;
}

.hamburger_menu #toggle {
    /* 让复选框隐藏 */
    display: none;
}

.hamburger_menu label {
    display: block;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

/* 存放线条的容器 */
.hamburger_menu label .hamburger_container {
    /* 相对定位 按照自身位置移动，不会影响父盒子 */
    position: relative;
    top: 17px;
    left: 14px;
    width: 20px;
    height: 20px;
    background-color: skyblue;
}

/* 绘制线条 */
.hamburger_menu label .hamburger_container span {
    position: relative;
    top: 0;
    display: block;
    height: 1px;
    background-color: #fff;
    /* 设置取消选中的过渡时间 */
    transition: transform .2s ease-in-out, top .2s ease-in-out .2s;
}
.hamburger_menu label .hamburger_container span:nth-child(2) {
    top: 10px;
}

/* 设置转换 */
/* + 是相邻兄弟选择器，找相邻的 label */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(1) {
    top: 5px;
    /* 顺时针旋转 45度 */
    transform: rotate(45deg);
    /* 先执行 top，0.2秒后再执行旋转 */
    transition: top .2s ease-in-out, transform .2s ease-in-out .2s;
}
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(2) {
    top: 5px;
    /* 逆时针旋转 45度 */
    transform: rotate(-45deg);
    transition: top .2s ease-in-out, transform .2s ease-in-out .2s;
}

.hamburger_menu ul {
    width: 100vm;
    height: calc(100vh - 48px);
    padding: 0 30px;
    background-color: rgba(0, 0, 0, 0.9);
    /* 设置下拉菜单栏的转换 */
    /* 缩放到 0 就是没有 */
    transform: scaleY(0);
    /* 设置过渡 */
    transition: all .4s ease-in-out;
    /* 默认是中间缩放，需设置从上面下来，因此需要设置中心点 */
    /* 以下值就是从最上面的中间开始缩放和放大，得到下拉的效果 */
    transform-origin: 50% 0;
    /* 设置透明度，达到更好的视觉效果 */
    opacity: 0;
}

.hamburger_menu ul li {
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    list-style: none;
}

/* 给前三个 li 设置下边框 */
.hamburger_menu ul li:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

/* 选中复选框放大到原有高度 */
/* ~ 是通用兄弟选择器，即找同级的 ul 元素 */
.hamburger_menu #toggle:checked ~ ul {
    transform: scaleY(1);
    opacity: 1;
}
